// 方案二：直接在body上添加loading，无需包裹容器
let count = 0; // 保证全局唯一loading

/**
 * 显示加载动画
 *
 * 如果尚未显示加载动画，则将其显示出来，并增加加载动画的显示计数。
 */
export const showLoading = () => {
    if (count === 0) {
        const loading = document.getElementById('loading');
        // 显示加载动画，并设置样式属性(react18版本需要使用setProperty方法设置样式属性，否则无效)
        loading?.style.setProperty('display', 'flex');
    }
    count++;
};

/**
 * 隐藏加载中的提示。
 *
 * 当调用此函数时，会将全局计数器 count 减一。
 * 如果 count 小于等于 0，则隐藏页面上的加载提示。
 */
export const hideLoading = () => {
    count--;
    if (count <= 0) {
        const loading = document.getElementById('loading');
        // 隐藏加载动画，并设置样式属性(react18版本需要使用setProperty方法设置样式属性，否则无效)
        loading?.style.setProperty('display', 'none');
    }
};

/* 
方案一：Spin的tip生效需要Spin作为包裹容器时，内部有子元素时才生效，否则tip无效

// loading.less-----------------------------------------------------------------------
#loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;

    .loading-tip {
        font-size: 20px;
        color: #1677ff;
        text-shadow : 0 1px 2px #fff
    }
}




// index.tsx-----------------------------------------------------------------------
import './loading.less';

import { createRoot } from 'react-dom/client';

import Loading from './Loading';


let count: number = 0; // 保证全局唯一loading
export const showLoading = () => {
    if (count === 0) {
        const dom = document.createElement('div');
        dom.setAttribute('id', 'loading');
        document.body.appendChild(dom);
        createRoot(dom).render(<Loading />);
    }
    count++;
};

export const hideLoading = () => {
    count--;
    if (count === 0) {
        const dom = document.getElementById('loading') as HTMLDivElement;
        document.body.removeChild(dom);
    }
};


// Loading.tsx-----------------------------------------------------------------------
import { Spin } from 'antd';

const Loading = ({ tip = 'loading' }: { tip?: string }) => {
    return (
        <Spin
            className="request-loading"
            size="large"
            tip={tip}
        />
    );
};

export default Loading;

 */
